<template>
  <div>
    <el-container>
      <el-header>
        <el-row :span=`24`>
          <el-col >
            <el-menu
              router
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item
                route
                :index="{ name: 'Home' }"
                @click="changeShow('home')"
              >
                发现
              </el-menu-item>
              <el-menu-item
                route
                @click="changeShow('topic')"
                :index="{ name: 'Topic' }"
              >
                专题
              </el-menu-item>
              <el-submenu index="3">
                <template slot="title"
                  >消息
                </template>
                <el-menu-item index="2-1">评论</el-menu-item>
                <el-menu-item index="2-2">简信</el-menu-item>
                <el-menu-item index="2-3">投稿请求</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title"
                    >选项4
                  </template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item
                route
                @click="changeShow('download')"
                index="'/download'"
              >
                下载手机应用
              </el-menu-item>
              <el-menu-item class="nav-input">
                <el-input
                  size="small"
                  placeholder="密码"
                  v-model="searchText"
                ></el-input>
              </el-menu-item>
              <div class="float-right" v-if="loginSuccess === false">
                <el-menu-item
                  route
                  :index="{ name: 'login', params: { loginWay: 'login' } }"
                >
                  登录
                </el-menu-item>
                <el-menu-item
                  route
                  :index="{ name: 'login', params: { loginWay: 'register' } }"
                >
                  注册
                </el-menu-item>
              </div>
              <div class="float-right" v-if="loginSuccess === true">
                <el-menu-item
                  route
                  :index="{ name: 'login' }"
                  @click="changeLogin('login')"
                >
                  个人信息
                </el-menu-item>
              </div>

              <!--          <router-view></router-view>-->
            </el-menu></el-col
          ></el-row
        >
      </el-header></el-container
    >
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: `Header`,
  data() {
    return {
      activeIndex: 1,
      searchText: ``,
      show: `home`
    };
  },
  computed: mapState({
    loginSuccess: state => state.app.loginSuccess
  }),
  methods: {
    handleSelect() {
      console.log(`ee`);
    },
    changeLogin: str=> {
      this.$store.dispatch(`changeLoginWay`, str);
    },
    changeShow: function(str) {
      this.show = str;
    }
  },
  watch: {
    $route(to, from) {
      if (to.name) {
        this.show = to.name.toLowerCase();
      }
      if (to.params.loginWay) {
        this.$store.dispatch(`changeLoginWay`, to.params.loginWay);
        //this.changeLogin(to.params);
      }
    }
  }
};
</script>
<style>
.float-right {
  display: inline-flex;
  height: inherit;
  float: right;
}

.nav-input {
  text-decoration: none;
  border: none !important;
  width: 300px;
  margin: 0.3em auto;
  padding: auto;
}

a {
  text-decoration: none;
}

.el-menu-demo {
  text-decoration: none !important;
}
</style>
